<template>
  <div class="homepage">
    <div class="homepage_headers">
      <h2>叩丁狼商品管理系统</h2>
    </div>
    <div class="homepage_left">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        :router="true"
      >
        <el-submenu
          :index="item.id + ''"
          v-for="(item, index) in getState"
          :key="index"
        >
          <template slot="title">
            <i class="el-icon-s-tools"></i>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item
            v-for="(arg, index) in item.children"
            :index="arg.path"
            :key="index"
            >{{ arg.name }}</el-menu-item
          >
          <!-- <el-menu-item index="/category">商品分类</el-menu-item>
          <el-menu-item index="/brand">品牌管理</el-menu-item>
          <el-menu-item index="/attribute">商品属性管理</el-menu-item> -->
        </el-submenu>
        <!-- <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-s-management"></i>
            <span>订单中心</span>
          </template>
          <el-menu-item index="/order">订单列表</el-menu-item>
        </el-submenu>
        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-headset"></i>
            <span>店铺运营</span>
          </template>
          <el-menu-item index="/topic">专题管理</el-menu-item>
          <el-menu-item index="/statdata">运营数据</el-menu-item>
        </el-submenu> -->
      </el-menu>
    </div>
    <div class="homepage_content">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
// import { getTopCategory } from "../../request/api";
export default {
  data() {
    return {};
  },
  computed: {
    getState() {
      return this.$store.state.menus;
    },
  },
  methods: {
    handleOpen() {},
    handleClose() {},
  },
  created() {
    // getTopCategory().then((res) => {
    //   console.log(res);
    // });
  },
};
</script>
 
<style lang = "less" scoped>
.homepage {
  position: relative;
  .homepage_headers {
    height: 70px;
    background-color: rgba(64, 158, 255);
    padding: 0 20px;
    h2 {
      color: #fff;
      font-weight: normal;
      line-height: 70px;
    }
  }
  .homepage_left {
    position: absolute;
    top: 70px;
    left: 0;
    bottom: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    background-color: #545c64;
  }
  .homepage_content {
    position: absolute;
    top: 70px;
    left: 250px;
    right: 0;
    bottom: 0;
    height: 100vh;
    padding: 20px 10px;
    background-color: rgba(240, 240, 240);
  }
}
</style>